import React from "react";
import {Divider as AntdDivider, Form as AntdForm} from 'antd';
import {
    renderItems,
    VJsonComponent,
    VJsonComponentBase,
} from "../factory";
import _ from 'lodash'
import {toJS} from "mobx";
import {apply} from "..";

export interface DividerVJsonProp {
    /**
     * 是否可见
     */
    visible?: boolean

    prefixCls?: string;
    type?: 'horizontal' | 'vertical';
    orientation?: 'left' | 'right' | 'center';
    className?: string;
    title?: string
    dashed?: boolean;
    style?: React.CSSProperties;
    plain?: boolean;
}

export interface DividerState {

}

@VJsonComponent({
    view: 'divider'
})
export default class Divider extends VJsonComponentBase<DividerVJsonProp, DividerState> {
    static defaultProps: DividerVJsonProp = {
        orientation: 'left',
        visible: true
    }

    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Divider.defaultProps
        )
    }

    render() {
        if (!this.props.vjson.visible) {
            return null
        }

        return (
            // @ts-ignore
            <AntdDivider key={this.key} view_id={this.key} aria-roledescription={this.view}
                type={apply(this, this.props.vjson.type)}
                style={apply(this, toJS(this.props.vjson.style))}
                plain={apply(this, this.props.vjson.plain)}
                orientation={apply(this, this.props.vjson.orientation)}
                dashed={apply(this, this.props.vjson.dashed)}
                className={apply(this, this.props.vjson.className)}
            >
                {this.props.vjson.title}
            </AntdDivider>
        )
    }
}
